<template>
    <div class="m-tabbar-item" :class="{'is-active': isActive}" @click="$parent.$emit('input', id)">
        <a>
            <span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span>
            <span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span>
            <span class="m-tabbar-item-text"><slot></slot></span>
        </a>
    </div>
</template>

<script>
export default {
  props: ['id'],
  computed: {
    isActive () {
      if (this.$parent.value === this.id) {
        return true
      }
    }
  }
}
</script>

<style lang="less">
.m-tabbar-item {
    flex: 1;
    text-align: center;
    .m-tabbar-item-icon {
        display: block;
        img {
            width: 28px;
            height: 28px
        }
    };
    .m-tabbar-item-text {
        display: block;
        font-size: 10px;
        color: #666666
    }
    &.is-active {
        .m-tabbar-item-text {
            color: #ff6384
        }
    }
}
</style>
